<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>光照阴影实时计算</title>
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <link rel="stylesheet" href="common.css">
</head>

<body>
    <script>
        // 创建场景
        let scene = new THREE.Scene();


        // 创建平面
        let planeGeometry = new THREE.PlaneGeometry(50, 50); // 平面网格
        let planeMaterial = new THREE.MeshLambertMaterial();
        let plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotateX(-Math.PI / 2); //旋转网格模型
        plane.receiveShadow = true; // 设置接收阴影的投影面
        scene.add(plane);

        // 创建立方体
        let boxGeometry = new THREE.BoxGeometry(10, 10, 10);
        let boxGeometryMaterial = new THREE.MeshLambertMaterial({
            color: 0x00ff00
        });
        let box = new THREE.Mesh(boxGeometry, boxGeometryMaterial);
        box.position.y = 8;
        box.castShadow = true; // 设置产生投影的网格模型
        scene.add(box);

        // 点光源
        let spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-60, 40, -20);
        spotLight.castShadow = true; // 设置灯光生成阴影
        scene.add(spotLight);


        // 【第三步：相机设置】
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 50; //三维场景显示范围控制系数，系数越大，显示的范围越大
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); //创建相机对象
        camera.position.set(200, 300, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        var axisHelper = new THREE.AxisHelper(600); // 辅助坐标系
        scene.add(axisHelper); //场景中加入辅助线

        // 【第四步：渲染对象】
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 0.3); //设置背景颜色
        renderer.shadowMap.enabled = true; //渲染阴影
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
        renderer.render(scene, camera); //执行渲染操作（场景、相机）
    </script>
</body>

</html>